import React, {useState} from 'react';
import './index.css'

interface DataType {
  src: string;
  title?: string;
}

interface Props {
  ImageList: DataType[]
}

/**
 * @description: 一个可展开图片的Card组件
 * @param: ImageList数组，数组中的每个元素是一个对象，对象中src为图片路径参数，title为图片标题，作为可选参数
 * @author: YoungYa
 * @adte 2023/6/27
 */
const ExpendCards: React.FC<Props> = (props: Props) => {

  const {ImageList} = props;

  const [current, setCurrent] = useState<number>(0)

  return (<div className={"container"}>
    {ImageList?.map((item, index) => (
      <div className={`${"panel"} ${current === index ? 'active' : ''}`}
           style={{backgroundImage: `url(${item.src})`}}
           key={index} onClick={() => setCurrent(index)}
      >
        <h3>{item?.title}</h3>
      </div>
    ))}
  </div>)
}

export default ExpendCards;
